//jquery选择器，选中指定元素，绑定实现，执行代码逻辑
$('.btn-list').on('click', function () {
    $('#music-list-dialog').animate({ top: '10rem' }, 100)
})

//点击关闭按钮折叠列表框（课堂练习）
$('#btn-close').click(function () {
    $('#music-list-dialog').animate({ top: '100%' }, 100)
})

/*************************/
//动态创建音频对象，音乐资源的播放通过该对象实现（并且将其包装为jquery对象）
const player = $('<audio>')
//歌曲api接口地址
const baseURL = 'http://home.softeem.xin:8088/music/listAll'
//声明空数组缓存从服务端读取的歌曲数据
let musics = []
//初始化当前正在播放的歌曲索引
let currentIndex = 0
//初始化当前正在播放的歌曲索引
let now = 0;
let total = 0;
//标记当前播放器的播放状态 true-播放中 false-未播放
let playing = false
//循环类型 (0-列表，1-随机，2-单曲)
let loopType = 0

//前端如何请求服务端数据，有哪些方式？
// 异步请求-ajax（XmlHttpRequest实现与服务端交互）
// websocket-全双工通信（弹幕，直播推流）
//异步
$.get(baseURL, function (data) {
    //缓存数据到变量中
    musics = data
    //循环遍历歌曲列表
    $.each(musics, (i, m) => {
        $('#music-list').append(`<li data-index="${i}">${m.name}</li>`)
    })
    //为播放器初始化播放源(页面初次加载未从列表选择歌曲播放时，点击播放按钮实现播放源初始化)
    player.prop('src',musics[currentIndex].path)
})

//html5 新增一个全局属性  data-[key]=[value]
//针对动态生成的元素无法直接通过选择器选中,通常需要先选中存在的父元素，再通过父元素将事件传递子元素上
//为列表中每一个列表项绑定点击事件，实现歌曲播放
//事件委派（委托）
$('#music-list').on('click', 'li', function () {

    // 清除上一首歌曲的高亮
    //$('#music-list li').removeClass('active');
    
    //获取当前被点击的列表项索引值（歌曲索引）
    currentIndex = $(this).data('index')
    //获取需要被播放的歌曲对象
    let m = musics[currentIndex]
    //获取需要被播放的歌曲名字
    $('.music-name').text(m.name);
    //为播放器对象设置播放源
    player.prop('src', m.path)

    // 高亮显示正在播放的歌曲
    //$(this).addClass('active');

    //主动触发播放事件
    // player.trigger('play') //player[0].play()
    startPlay()
})

//开始播放
function startPlay() {
    // 获取暂停按钮元素
    const playPauseButton = document.querySelector('.btn-play-pause i');
    //使用定时器，定时监听播放器准备状态
    let flag = setInterval(function () {
        let state = player.prop('readyState')
        if (state === 4) {
            // 切换按钮图标为播放图标
            playPauseButton.classList.remove('fa-play');
            playPauseButton.classList.add('fa-pause');
            //执行播放
            player.trigger('play');
            // 添加类以触发旋转动画
            $('.disc').addClass('playing');
            //标记播放器处于播放状态
            playing = true;
            //清理定时器
            clearInterval(flag);
        }
    }, 50)
    //1.同步显示歌曲名称
    $('.music-name').text(musics[currentIndex].name);

    //2.实现唱片旋转
    //$('.disc').addClass('playing');
    
    //3.切换播放按钮为暂停图标
    //$('.btn-play-pause>i').removeClass('fa-play').addClass('fa-pause')
    
    //4.歌曲列表高亮显（背景或歌曲名）示正在播放歌曲（考虑如何清除上一首歌曲的高亮）
    $(`li:eq(${currentIndex})`).removeClass('active') //清除上一曲高亮
    $(`li:eq(${currentIndex})`).addClass('active') //当前歌曲高亮

    //5.同步显示唱片封面和背景毛玻璃
    $('.blur-img,.ablum-img').prop('src',musics[currentIndex].ablumImg)
}

//扩展
//1. 同步显示歌曲的当前播放时长和总时长
player.on('loadeddata',function(){
    //获取歌曲的播放总进度
    total = this.duration;
    //将总时长在指定位置显示
    $('.time-total').text(fmtTime(total));
});

//2. 进度条实时同步显示
//监听currentTime的实时变化
player.on('timeupdate',function(){
    //获取当前播放器的播放进度
    now = this.currentTime
    //实时显示当前时间到指定位置
    $('.time-now').text(fmtTime(now))
    //实现进度条实时改变
    let progress = now / total * 100 + '%'
    //设置进度条的宽度为实时的歌曲进度
    $('.progress').css('width',progress)
})

//时间格式化通用函数，将以秒为单位的使劲按格式化为：mm：ss
function fmtTime(t){
    //根据提供的时间构建一个日期对象
    t = new Date(t * 1000);
    //获取当前日期所表示的分钟数
    let m = t.getMinutes();
    let s = t.getSeconds();
    //mm:ss
    m = m <10 ? '0'+ m : m;
    s = s <10 ? '0'+ s : s;
    return `${m}:${s}`;
}

//为精度绑定点击事件，控制歌曲播放进度的变化
$('.box-progress').on('click',function(e){
    //当前容器总宽度
    let w = $(this).width()
    //获取当前位置和左侧的距离
    let x = e.offsetX
    //获取点击位置的实时进度
    now = x / w * total
    //设置播放器的当前位置为指定值
    player.prop('currentTime',now)
})

$('.btn-play-pause').on('click',function(){
    if(playing){
        //暂停
        player.trigger('pause')
        //停止唱片旋转
        $('.disc').removeClass('playing');
        //将图标切换为播放图标
        $('.btn-play-pause>i').removeClass('fa-pause').addClass('fa-play')
        //将播放状态标记为false(暂停)
        playing = false
    }else{
        //继续播放
        startPlay()
    }
})

//1.按钮控制循环状态变化（Loop：0-列表/1-随机/2-单曲
$('.btn-loop').on('click',function(){
    // 始终让循环类型在0~2之间变化
    loopType = ++loopType % 3
    let msg = ''
    if(loopType === 0){
        msg = '列表循环'
        $(this).html('<i class="fa fa-list-ol"></i>');
    }else if(loopType === 1){
        msg = '随机播放'
        $(this).html('<i class="fa fa-random"></i>');
    }else{
        msg = '单曲循环'
        $(this).html('<i class="fa fa-refresh"></i>');
    }
    //显示提示框
    $('#tips>span')
    .text(msg)
    .fadeIn(100,function(){
        $(this).fadeOut(1000)
    });
});

//2.点击上一曲/下一曲按钮，结合循环方式切歌
function switchMusic(t){
    //索引变更前，当前索引指向上一首歌曲，还原上一首歌曲的亮度
    $(`li:eq(${currentIndex})`).removeClass("active");
    switch(loopType){
        case 0:
        //列表循环
        if(t === 'prev'){
            //上一曲
            currentIndex = --currentIndex < 0 ? musics.length - 1 : currentIndex
        }else{
            //下一曲
            currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex
        }
        break
    case 1:
        //随机播放 [0.0,1.0)
        currentIndex = Math.floor(Math.random() * musics.length)
        break
    }
    //为播放器重新指定播放源
    player.prop('src',musics[currentIndex].path)
    //开始播放
    startPlay()
}
//上一曲
$('.btn-prev').on('click',function(){
    switchMusic('prev')
})
//下一曲
$('.btn-next').on('click',switchMusic)

//3.歌曲播放完毕之后自动切歌（参考audio-api ended事件）
player.on('ended',switchMusic)